<template>
  <el-table
    v-loading="loading"
    :data="dataRows"
    :fit="true"
    class="custom-x-table"
    :height="tableHeight"
    :border="isborder"
    v-bind="$attrs"
  >
    <template v-for="(col) in dataCols">
      <el-table-column v-if="col.type==='index'" :key="col.label" type="index" :label="col.label" />
      <el-table-column
        v-else
        :key="col.label"
        :label="col.label"
        :prop="col.prop"
        :show-overflow-tooltip="true"
        :width="col.width"
        :fixed="col.fixed"
        :render-header="col.renderHeader"
      >
        <template v-slot="scope">
          <div v-if="col.renderBody">
            <RenderH :render="col.renderBody" :data="scope" />
          </div>
          <div v-else class="cell el-tooltip">
            {{ scope.row[col.prop] || '-' }}
          </div>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>
<script>
export default {
  components: {
    RenderH: {
      name: 'RenderH',
      // 负责生成 vnode 执行 render 渲染
      props: {
        data: {
          type: Object
        },
        render: {
          type: Function
        }
      },
      render(h) {
        this.data.ctx = this.data._self.$parent.$parent
        return this.render(h, this.data)
      }
    }
  },
  props: {
    loading: {
      type: Boolean
    },
    dataCols: {
      type: Array,
      required: true
    },
    dataRows: {
      type: Array,
      required: true
    },
    tableHeight: {
      type: Number
    },
    isborder: {
      type: Boolean
    }
  }
}
</script>
